<template>
  <div class="store-container">
    <el-card>
      <div class="operateContainer">
        <div class="formContainer">
          <el-form inline>
            <el-form-item>
              <el-input
                placeholder="请输入库位编号/名称"
                style="width: 250px"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="请选择仓库" style="width: 250px">
                <el-option
                  v-for="item in storeData"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select placeholder="请选择库位" style="width: 250px">
                <el-option
                  v-for="item in locationData"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="searchOperate">
          <div class="button">
            <el-button type="primary" plain style="width: 80px">重置</el-button>
            <el-button type="primary" style="width: 80px">查询</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <template #header>
        <span style="font-size: 16px; font-weight: bold">库位管理</span>
      </template>
      <div class="operate">
        <el-button style="width: 80px" type="primary" @click="gotoAdd"
          >新增</el-button
        >
        <el-button style="width: 80px" type="primary" plain>删除</el-button>
      </div>
      <el-table :data="tableData" style="margin-top: 15px" border>
        <el-table-column
          label="序号"
          align="center"
          type="index"
          width="60"
        ></el-table-column>
        <el-table-column
          label="库位编码"
          align="center"
          width="90"
        ></el-table-column>
        <el-table-column
          label="库位名称"
          align="center"
          width="90"
        ></el-table-column>
        <el-table-column label="面积" align="center"></el-table-column>
        <el-table-column
          label="最大载重量"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          label="库位位置X"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          label="库位位置Y"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          label="库位位置Z"
          align="center"
          width="100"
        ></el-table-column>
        <el-table-column
          label="所属仓库"
          align="center"
          width="90"
        ></el-table-column>
        <el-table-column
          label="所属库位"
          align="center"
          width="90"
        ></el-table-column>
        <el-table-column label="状态" align="center"></el-table-column>
        <el-table-column label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template #default>
            <el-button link type="primary" @click="handleClick">
              编辑
            </el-button>
            <el-button link type="primary">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="prev,pager,next,jumper,->,sizes,total"
        :total="total"
        @current-change="handler"
        @size-change="sizeHandler"
        style="margin-top: 10px"
      ></el-pagination>
    </el-card>
  </div>
</template>
    
    <script setup lang="ts">
import { ref } from "vue";

// mockData
let tableData = ref([{}]);
let storeData = ref(["仓库一", "仓库二", "仓库三", "仓库四", "仓库五"]);
let locationData = ref(["库位一", "库位二", "库位三", "库位四", "库位五"]);
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);

const gotoAdd = () => {};
const handler = (page) => {
  currentPage.value = page;
};
const sizeHandler = (page_size) => {
  pageSize.value = page_size;
};
const handleClick = () => {};
</script>
    
    <style scoped lang="scss">
.store-container {
  padding: 20px;
  .operateContainer {
    display: flex;
    align-content: center;
    justify-content: space-between;
    .formContainer {
      width: 1060px;
      height: 32px;
      transition: height 0.3s ease; // 添加高度变化的过渡效果
      overflow: hidden; // 防止内容溢出
      .el-form-item {
        margin-bottom: 0;
      }
    }
    .searchOperate {
      display: flex;
      align-items: center;
      .more {
        margin-left: 20px;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>